@media screen and (min-width: 750px) {
    html {
        font-size: 75px !important;
    }
}

@media screen and (max-width: 320px) {
    html {
        font-size: 32px !important;
    }
}

body {
    background-color: #f9f9f9;
}

header {
    display: flex;

    width: 10rem;
    height: 1.28rem;
    background-image: linear-gradient(180deg, #f24c59 0%, #f28c4c 100%);

    img {
        margin-top: .2931rem;
        width: .2855rem;
        height: .5177rem;
        margin-left: .4533rem;
    }

    span {
        margin-left: 3.6rem;
        margin-top: .1867rem;
        display: block;
        color: #ffffff;
        font-size: .5333rem;

    }
}

.top {
    display: flex;
    margin-top: .5333rem;
    justify-content: space-between;
    align-items: center;
    position: relative;

    &::after {
        content: "";
        position: absolute;
        display: block;
        width: 722px;

        border: 2px solid;
        border-color: #ededed;

        top: .9333rem;
        left: .4rem;
    }

    i:nth-child(1) {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: .4rem;

        img {
            width: .5333rem;
            height: .5333rem;
        }

        span {
            font-weight: 600;
            color: #202020;
            font-size: .4267rem;
            margin-left: .1333rem;
        }
    }

    i:nth-child(2) {
        font-weight: 600;
        color: #202020;
        font-size: .4267rem;
        margin-right: .4rem;
    }
}

.banner {
    display: flex;
    margin-top: 1.0667rem;
    flex-direction: column;



    i:nth-child(1) {
        display: flex;



        span {
            display: block;
            color: #6a6c6b;
            font-size: .3733rem;
            text-align: center;
            line-height: .9333rem;
            margin-left: .4533rem;

        }


        span:nth-child(1) {
            width: 1.8133rem;
            height: .9333rem;
            background-color: #f2f2f2;
            border-radius: 2.6667rem;
        }

        span:nth-child(2) {
            width: 1.8133rem;
            height: .9333rem;
            background-color: #f2f2f2;
            border-radius: 2.6667rem;
        }

        span:nth-child(3) {
            width: 3.2rem;
            height: .9333rem;
            background-color: #f2f2f2;
            border-radius: 2.6667rem;
        }
    }

    i:nth-child(2) {
        display: flex;
        margin-left: .4rem;
        margin-top: .2667rem;

        span {
            text-align: center;
            display: block;
            width: 3.8133rem;
            height: .9333rem;
            background-color: #f2f2f2;
            border-radius: 2.6667rem;
            line-height: .9333rem;
            color: #6a6c6b;
            font-size: .3733rem;
        }
    }

    i:nth-child(3) {

        display: block;
        transform: rotate(180deg);
        margin-right: 4.7172rem;
        margin-top: .5333rem;



        img {
            width: .2828rem;
            height: .1413rem;
            border: .0533rem solid;
            // border-color: #cbcbcb;
            border-color: red;
        }

    }
}

.bottom {
    display: flex;
    justify-content: space-between;
    margin-top: .6667rem;

    >img {
        width: 1.0667rem;
        height: 1.0667rem;
        margin-left: .5333rem;
    }

    .i1 {
        display: flex;

        flex-direction: column;
        margin-left: -2.9733rem;
        margin-top: .1333rem;

        em {
            span:nth-child(2) {
                font-weight: 500;
                color: #000000;
                font-size: .32rem;
            }

            >img {
                width: 1.0689rem;
                height: .3432rem;
            }


        }

        >span {
            color: #6a6c6b;
            font-size: .32rem;
        }
    }

    .i2 {
        display: flex;
        flex-direction: column;
        margin-right: .5333rem;



        span:nth-child(1) {



            img {
                width: .32rem;
                height: .32rem;

            }
        }

        span:nth-child(2) {
            color: #6a6c6b;
            font-size: .32rem;
            margin-left: .6667rem;
        }
    }
}

.wz1 {
    margin-top: .2667rem;
    margin-left: .5333rem;
    color: #b0b8c2;
    font-size: .32rem;
}

.wz2 {
    margin-top: .2667rem;
    margin-left: .5333rem;
    color: #494955;
    font-size: .3733rem;
}

.bottom {
    .img2 {
        width: 2.8rem;
        height: 2.8rem;
    }
}